<template>
  <view class="demand-list">
    <navigator :url="item.status == 0 ? `/pages/subpackages/demand/detail?id=${item.id}&type=${item.demand_release_type_id}&title=${item.title}` : ''" open-type="navigate" hover-class="none"
      v-for="(item, index) in demandList" :key="index" class="item u-p-20 u-flex u-col-top">
      <view @click.stop="linkDetail(item)">
        <u-image :src="item.avatar" mode="widthFix" width="120" shape="circle"></u-image>
      </view>
      <view class="u-flex-1 u-m-l-20">
        <view class="top u-flex u-col-top u-row-between">
          <view class="info u-flex-1 u-m-r-20 u-m-b-10">
            <view class="name">{{item.title || ""}} <text v-if="item.demand_release_type_id != 1">{{item.type_name || ""}}</text></view>
            <view class="address u-m-t-10 u-font-26">{{item.city || ""}}</view>
            <view class="distance u-m-t-10 u-font-26">距您{{item.km || "0"}}km</view>
          </view>
          <u-tag v-if="item.status == 0" text="待应征" bg-color="#389bf2" color="#fff" border-color="#fff" />
          <u-tag v-else-if="item.status == 1" text="进行中" bg-color="#ffce00" color="#fff" border-color="#fff" />
          <u-tag v-else text="已完成" bg-color="#4cd964" color="#fff" border-color="#fff" />
        </view>
        <view class="time u-font-26">发布时间：{{item.createtime || ""}}</view>
      </view>
    </navigator>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "com-demand",
  data() {
    return {};
  },
  props: {
    // 需求列表
    demandList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity"]),
  },
  methods: {
    // 跳转详情
    linkDetail(data) {
      let url =
        data.is_lvs == 1
          ? `/pages/subpackages/detail/lawyer?id=${data.user_id}`
          : `/pages/subpackages/detail/user?id=${data.user_id}`;
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.demand-list {
  .item {
    background-color: $uni-bg-color;
    box-shadow: 0 0 5px $uni-border-color;
    border-radius: 10rpx;

    &:nth-child(n + 2) {
      margin: 20rpx 0 0;
    }
  }

  .address,
  .distance {
    color: $uni-text-color-dark;
  }

  .time {
    color: $uni-text-color-grey;
  }
}
</style>
